import { PlankEdgeLegend } from '@/components/Plank';
import { PlankBaseInfo } from '@/components/Plank/PlankBaseInfo';
import { ShowEdge } from '@/modules/ToolBar/ShowEdge';
import { IPlank } from '@/types';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Collapse, ConfigProvider, Tooltip } from 'antd';
import { createStyles } from 'antd-style';
import { PropsWithChildren, ReactNode } from 'react';
import { FormTitle } from '../CustomForm';

const useIconSyles = createStyles(({ token }) => ({
  hoverColor: {
    ':hover': {
      color: token.colorPrimary,
    },
  },
}));
function InfoLabel({
  children,
  tooltip,
}: {
  children: ReactNode;
  tooltip?: ReactNode;
}) {
  const { styles, cx } = useIconSyles();
  return (
    <span>
      <span className="mr-1">{children}</span>
      <Tooltip title={tooltip}>
        <InfoCircleOutlined
          className={cx('cursor-pointer', styles.hoverColor)}
        />
      </Tooltip>
    </span>
  );
}

export function PlankInfo(props: { plank: IPlank }) {
  const { plank } = props;

  return (
    <div>
      <FormTitle title="基础信息" />
      <PlankBaseInfo plank={plank} />
    </div>
  );
}

export function EdgeInfo({ plank }: { plank: IPlank }) {
  return (
    <ConfigProvider
      theme={{
        components: {
          Collapse: {
            headerPadding: 0,
            contentPadding: 0,
            headerBg: 'transparent',
          },
        },
      }}
    >
      <Collapse
        defaultActiveKey={0}
        size="middle"
        bordered={false}
        collapsible="header"
        items={[
          {
            label: <FormTitle title="封边信息" />,
            extra: <ShowEdge icon={null} type="link" />,
            children: (
              <PlankEdgeLegend edgeBanding={plank?.edgeBanding ?? []} />
            ),
          },
        ]}
      />
    </ConfigProvider>
  );
}

export function Block({ children }: PropsWithChildren) {
  return <div className="p-2">{children}</div>;
}
export function BlockDivider() {
  return <div className="border-y-2" />;
}
